<template>
  <up-navbar title="联系我们" bgColor="transparent" @leftClick="leftClick"> </up-navbar>
  <img src="../../static/bg.png" alt="" class="bgImg" />
  <img src="../../static/bigIcon.png" alt="" class="bigIcon" />
  <div class="topSitting">头部占位</div>
  <div class="userArea" :class="{noLoginJc: !isLogin}">
    <div class="advantar">
      <img src="../../static/my_head.png" alt="" class="advantarImg" />
    </div>
    <div class="userInfo" :class="{noLoginMl: !isLogin}">
      <div class="userName" :class="{noLoginUn: !isLogin}">
        <div>{{ info.userName }}</div>
        <div v-if="isLogin" class="userPhone">{{ info.phoneNumber }}</div>
        <div v-else class="userPhone" :class="{noLoginFs: !isLogin}" @click="callPhone">
          <img src="../../static/telephone_icon.png" alt="" class="contactBtnImg contactBtnImgMr" />
          {{ info.phoneNumber }}
        </div>
      </div>
      <div class="baseArea">{{ info.orgName }}</div>
    </div>
    <div class="contactBtn" v-if="isLogin">
      <img src="../../static/telephone_icon.png" alt="" class="contactBtnImg" />
      <div>专属客户经理</div>
    </div>
  </div>
  <div class="ansTitle">常见问题</div>
  <div class="ansItem">
    <div class="itemBg"></div>
    <div class="quesItem">
      <img src="../../static/questions.png" alt="" class="questionsIcon" />
      <div class="quesText">我提交了申请材料审批一定能通过吗？</div>
      <img src="../../static/launch.png" alt="" class="downArrow" />
    </div>
    <div class="answerItem">
      <img src="../../static/answers.png" alt="" class="answersIcon" />
      <div class="ansText">
        不一定。贷款是否审批通过以及授信额度、利率等均以最终审批结果为准。
      </div>
    </div>
  </div>
  <div class="ansItem">
    <div class="itemBg"></div>
    <div class="quesItem">
      <img src="../../static/questions.png" alt="" class="questionsIcon" />
      <div class="quesText">如何查看科行e贷的授信期限、授信额度和利率？</div>
      <img src="../../static/launch.png" alt="" class="downArrow" />
    </div>
    <div class="answerItem">
      <img src="../../static/answers.png" alt="" class="answersIcon" />
      <div class="ansText">
        您可在微信小程序“我的”--“我的贷款”查看合同信息，也可在“安徽农金”手机银行APP上查看合同信息及可提款额度。
      </div>
    </div>
  </div>
  <div class="ansItem">
    <div class="itemBg"></div>
    <div class="quesItem">
      <img src="../../static/questions.png" alt="" class="questionsIcon" />
      <div class="quesText">如何计算贷款利息？</div>
      <img src="../../static/launch.png" alt="" class="downArrow" />
    </div>
    <div class="answerItem">
      <img src="../../static/answers.png" alt="" class="answersIcon" />
      <div class="ansText">
        贷款利息是从贷款发放的日期开始按照实际使用天数计算（未使用贷款则不计算利息）。
      </div>
    </div>
  </div>
  <div class="ansItem">
    <div class="itemBg"></div>
    <div class="quesItem">
      <img src="../../static/questions.png" alt="" class="questionsIcon" />
      <div class="quesText">如何还款？</div>
      <img src="../../static/launch.png" alt="" class="downArrow" />
    </div>
    <div class="answerItem">
      <img src="../../static/answers.png" alt="" class="answersIcon" />
      <div class="ansText">
        我行将在您的还款日前发送短信提示您还款日期和金额，请注意查收，您也可在我行的手机银行贷款记录模块的借据页面查看单笔贷款的到期日期、还款计划，请您在还款日当天17:00前在还款账户中留存足够的资金，也可在手机银行自助还款模块进行部分或全额提前还款，额度有效期内，您可多次提前还款，提前还款无手续费。
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import * as http from "../../utils/http";
const info = reactive({});
const isLogin = ref(wx.getStorageSync("token") ? true : false)
 
onMounted(() => {
  // 6.4号，未登录状态下不显示专属客户经理信息，显示科技银行客服热线0551-96668，可点击拨打
  if (!isLogin.value) {
    info.userName = '科技银行客服热线';
    info.phoneNumber = '0551-96668';
  } else {
    http.contactWe().then((res) => {
      let { data } = res;
      info.userName = data.userName;
      info.phoneNumber = data.phoneNumber;
      info.orgName = data.orgName;
    });
  }
});
const leftClick = ()=>{
  wx.navigateBack()
}
const formattedPhoneNumber = computed(() => {    
  return info.phoneNumber.replace(/-/g, '');    
});   
const callPhone = () => {   
  const formattedNum = formattedPhoneNumber.value;    
  uni.makePhoneCall({  
    phoneNumber: formattedNum  
  }).catch(error => {  
    // 添加错误处理  
    console.error('调用电话失败：', error);  
  });  
};
</script>

<style scoped lang="scss">
.ansItem {
  border-radius: 16rpx;
  margin: 15rpx 28rpx;
  position: relative;
  padding: 40rpx 33rpx 24rpx 35rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  box-shadow: 0rpx 4rpx 12rpx 0rpx #a4c3f3;
  .itemBg {
    border-radius: 16rpx;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0.85;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -999;
  }
  .quesItem {
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 37rpx;
    .questionsIcon {
      width: 40rpx;
      height: 38rpx;
      margin-right: 22rpx;
    }
    .quesText {
      color: #333333;
      width: 533rpx;
      margin-right: 11rpx;
    }
    .downArrow {
      margin-top: 9rpx;
      width: 20rpx;
      height: 12rpx;
    }
  }
  .answerItem {
    width: 100%;
    display: flex;
    align-items: flex-start;
    .answersIcon {
      width: 40rpx;
      height: 38rpx;
      margin-right: 22rpx;
    }
    .ansText {
      color: #333333;
      width: 533rpx;
      font-size: 20rpx;
    }
  }
}
.bgImg {
  width: 750rpx;
  height: 873rpx;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -99999;
}
.bigIcon {
  width: 185rpx;
  height: 144rpx;
  position: absolute;
  left: 533rpx;
  top: 339rpx;
  z-index: -9999;
}
.topSitting {
  height: 218rpx;
  opacity: 0;
}
.userArea {
  margin: 0 39rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .advantar {
    width: 120rpx;
    height: 120rpx;
    border: 8rpx solid #fff;
    border-radius: 50%;
    .advantarImg {
      width: 120rpx;
      height: 120rpx;
    }
  }
  .noLoginMl{
    margin-left: 30rpx;
  }
  .userInfo {
    margin-top: 16rpx;
    height: calc(100% - 44rpx);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    .userName {
      display: flex;
      align-items: center;
      height: 50rpx;
      line-height: 50rpx;
      color: #333333;
      font-size: 36rpx;
      margin-bottom: 9rpx;
      font-weight: 600;
      .userPhone {
        font-weight: normal;
        margin-left: 30rpx;
        color: #666666;
        font-size: 24rpx;
      }
      .noLoginFs{
        display: flex;
        align-items: center;
        font-size: 30rpx;
        margin-left: 0rpx;
        display: flex;
        align-items: center;
        justify-content: start;
      }
    }
    .noLoginUn{
      display: block!important;
    }
    .baseArea {
      height: 33rpx;
      line-height: 33rpx;
      color: #333;
    }
  }
  .contactBtnImg {
    width: 30rpx;
    height: 30rpx;
  }
  .contactBtnImgMr{
    margin-right: 10rpx;
  }
  .contactBtn {
    width: 204rpx;
    height: 44rpx;
    border-radius: 22rpx;
    background-color: #dbedff;
    margin-top: 24rpx;
    color: #307be5;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
}
.noLoginJc{
  justify-content: start!important;
}
.ansTitle {
  margin-top: 58rpx;
  margin-left: 38rpx;
  height: 45rpx;
  line-height: 45rpx;
  font-size: 32rpx;
  color: #307be5;
  font-weight: 600;
}
</style>
